<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<!-- 字符编码设置 - 使用UTF-8支持中文 -->
	<meta charset="UTF-8">
	<!-- 响应式视口设置 - 适配移动设备 -->
	<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=0.8">
	<!-- 页面标题 - 显示在浏览器标签页 -->
	<title>『 月华 』正在等待与您聊天 ~ </title>
	<!-- Markdown解析 - marked.js -->
	<script src="./import/marked.min.js"></script>
	<!-- 图表库 - ECharts v5.4.3 -->
	<script src="./import/echarts.min.js"></script>
	<!-- 流程图库 - Mermaid v10.5.0 -->
	<script src="./import/mermaid.min.js"></script>
	<!-- 图标库 - Font Awesome 6.4.0 -->
	<link rel="stylesheet" href="./import/fontAwesome/css/all.min.css">
	<!-- 代码高亮 - highlight.js v11.7.0 -->
	<script src="./import/highlight/highlight.min.js"></script>
	<!-- 代码高亮样式 - GitHub风格 -->
	<link rel="stylesheet" href="./import/highlight/styles/github.css">
	<!-- 引入Live2D -->
	<script src="./import/live2dcubismcore.min.js"></script>
	<!-- 引入Pixi.js -->
	<script src="./import/pixi.5.3.12.min.js"></script>
	<!-- 引入Pixi-Live2D -->
	<script src="./import/pixi-live2d-display-cubism4.min.js"></script>
	<!-- 引入QRCode.js -->
	<script src="./import/qrcode.min.js"></script>
	<!-- 引入KaTeX CSS样式文件，为数学公式提供渲染样式 -->
	<link rel="stylesheet" href="./import/katex/katex.min.css">
	<!-- 引入KaTeX核心JS文件，提供数学公式渲染功能 -->
	<script defer src="./import/katex/katex.min.js"></script>
	<!-- 引入KaTeX自动渲染插件，可自动识别并渲染页面中的数学公式 -->
	<script defer src="./import/katex/contrib/auto-render.min.js"></script>
	<!-- 自定义样式表 - 基础/布局/按钮/面板/响应式/组件样式 -->
	<style>
		@import url("./css/variables.css");
		@import url("./css/animation.css");
		@import url("./css/importLayout.css");
		@import url("./css/importComponents.css");
		@import url("./css/importLive2d.css");
		@import url("./css/importButton.css");
		@import url("./css/importPanel.css");
		@import url("./css/importMarkdown.css");
		@import url("./css/importMermaid.css");
		@import url("./css/message.css");
		@import url("./css/screenshot.css");
	</style>
</head>

<body>
	<!-- 背景容器，用于设置页面整体背景样式 -->
	<div class="background"></div>
	<!-- 玻璃效果容器，用于实现页面的玻璃拟态效果 -->
	<div class="glass-effect"></div>
	<!-- 主容器 - 包含所有界面元素 -->
	<div class="container">
		<!-- 主界面布局 -->
		<div class="main-container-panel">
			<!-- Live2D模型交互面板 -->
			<div class="live2d-container-panel" id="live2dContainerPanel">
				<!-- Live2D模型容器 -->
				<div id="live2dContainer">
					<!-- 触摸交互区域，用于触发 Live2D 模型的触摸反馈 -->
					<div class="trouch-interaction">
						<!-- 垂直布局面板，设置最小宽度和高度均为 75%，用于排列触摸交互按钮 -->
						<div class="vertical-layout-panel" style="min-width: 55%; min-height: 75%;">
							<!-- 头部触摸交互按钮，点击可触发 Live2D 模型头部的触摸反馈 -->
							<button class="trouch-interaction-button" id="headTouchButton"></button>
							<!-- 身体触摸交互按钮，点击可触发 Live2D 模型身体的触摸反馈 -->
							<button class="trouch-interaction-button" id="bodyTouchButton"></button>
							<!-- 腿部触摸交互按钮，点击可触发 Live2D 模型腿部的触摸反馈 -->
							<button class="trouch-interaction-button" id="legTouchButton"></button>
							<!-- 脚部触摸交互按钮，点击可触发 Live2D 模型脚部的触摸反馈 -->
							<button class="trouch-interaction-button" id="footTouchButton"></button>
						</div>
					</div>
					<!-- Live2D模型渲染画布 -->
					<canvas id="live2dCanvas"></canvas>
					<!-- 模型加载状态提示 -->
					<div class="live2d-model-intel">加载中...</div>
					<!-- 情绪状态面板 -->
					<div class="emotion-status-panel" id="emotionStatusPanel">
						<!-- 情绪状态指示器 -->
						<div class="emotion-indicator"></div>
						<!-- 当前情绪状态文本 -->
						<span>待机中</span>
					</div>
					<!--  Live2D 模型配置按钮面板 -->
					<div class="horizontal-layout-panel live2d">
						<!-- 长期记忆模式切换按钮 -->
						<button class="power-button live2d" id="longTermMemoryButton" title="长期记忆">
							<i class="fas fa-memory"></i>
						</button>
						<!-- 主动消息模式切换按钮 -->
						<button class="power-button live2d" id="activeMessageButton" title="主动消息">
							<i class="fas fa-comment-slash"></i>
						</button>
					</div>
					<!-- 功能配置按钮面板 -->
					<div class="vertical-layout-panel live2d">
						<!-- 功能控制按钮 -->
						<button class="power-button live2d" id="functionControlButton" title="功能控制">
							<i class="fas fa-cog"></i>
						</button>
						<!-- 聊天记录按钮 -->
						<button class="power-button live2d" id="chatHistoryButton" title="聊天记录" style="display: none;">
							<i class="fas fa-scroll"></i>
						</button>
						<!-- 深色与浅色模式切换按钮 -->
						<button class="power-button live2d" id="themeButton" title="切换主题">
							<i class="fas fa-moon"></i>
						</button>
						<!-- 语音输入按钮 -->
						<button class="power-button live2d" id="voiceInputButton" title="语音输入">
							<i class="fas fa-microphone"></i>
						</button>
						<!-- 开发者模式切换按钮 -->
						<button class="power-button live2d" id="developerModeButton" title="开发者模式">
							<i class="fas fa-star-and-crescent"></i>
						</button>
						<!-- 二维码切换按钮 -->
						<button class="power-button live2d" id="qrcodeButton" title="二维码">
							<i class="fas fa-qrcode"></i>
						</button>
					</div>
				</div>
				<!-- 角色交互模式的聊天输入面板 -->
				<div class="chat-input-panel" style="display: none;" id="live2dInputPanel">
					<!-- 角色交互聊天输入框 -->
					<textarea id="live2dInputBox" placeholder="你今天想和月华聊聊什么？" class="auto-resize-textarea"></textarea>
					<!-- 角色交互聊天发送按钮 -->
					<button class="chat-input-button" id="live2dInputButton" title="发送消息">
						<i class="fas fa-paper-plane"></i>
					</button>
				</div>
			</div>
			<!-- 聊天记录面板, 用于展示您与月华的对话历史 -->
			<div class="chat-container-panel" id="chatHistoryContainerPanel">
				<!-- 聊天交互面板，用于展示聊天相关内容 -->
				<div class="chat-history-panel" id="chatHistoryPanel"></div>
				<!-- 包含聊天输入文本框和发送按钮的容器 -->
				<div class="chat-input-panel">
					<button class="chat-input-button" id="inputFileButton" title="上传文件">
						<i class="fas fa-file-upload"></i>
					</button>
					<!-- 聊天输入文本框，用户可在此输入与月华聊天的内容，支持垂直调整大小 -->
					<textarea id="chatInputBox" placeholder="你今天想和月华聊聊什么？" class="auto-resize-textarea"></textarea>
					<!-- 聊天发送按钮，点击后可发送输入框中的内容 -->
					<button class="chat-input-button" id="chatInputButton" title="发送消息">
						<i class="fas fa-paper-plane"></i>
					</button>
				</div>
			</div>
			<!-- 模型配置面板，默认隐藏 -->
			<div class="chat-container-panel configure_panel" id="modelConfigContainerPanel" style="display: none;">
				<!-- 面板内容 -->
				<div class="config-grid">
					<!-- 配置卡片 : 推理模型 -->
					<div class="config-card">
						<!-- 配置卡片头部，显示推理模型标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-microchip"></i> 推理模型</h2>
						</div>
						<!-- 垂直布局面板，包含API端点、密钥、模型选择和连接测试按钮 -->
						<div class="vertical-layout-panel">
							<!-- API端点标签 -->
							<label for="reasoningEndpointUrl"> API-Url (推理模型)</label>
							<!-- 输入API端点的文本框 -->
							<input type="text" id="reasoningEndpointUrl" placeholder="请输入: API-Url (推理模型)">
							<!-- API密钥标签 -->
							<label for="reasoningEndpointKey"> API-Key (推理模型)</label>
							<!-- 输入API密钥的密码框 -->
							<input type="password" id="reasoningEndpointKey" placeholder="请输入: API-Key (推理模型)">
							<!-- 推理模型选择标签 -->
							<label for="reasoningModelDropdown"> API-Models (推理模型)</label>
							<!-- 选择推理模型的下拉框 -->
							<select id="reasoningModelDropdown" class="down_selection_box"></select>
							<!-- 垂直布局面板，包含连接测试按钮 -->
							<div class="vertical-layout-panel">
								<!-- 连接测试按钮，点击可测试与推理模型的连接状态 -->
								<button class="rectangle-button orange" id="reasoningConnectionButton">
									<i class="fas fa-plug"></i>
									<!-- 显示当前连接状态的文本 -->
									<span id="reasoningConnectionStatusText"> 未连接 (推理模型)</span>
									<!-- 连接状态指示器 -->
									<span class="status-indicator status-disconnected"
										id="reasoningStatusIndicator"></span>
								</button>
							</div>
						</div>
					</div>
					<!-- 配置卡片 : 嵌入模型 -->
					<div class="config-card">
						<!-- 配置卡片头部，显示嵌入模型标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-microchip"></i> 嵌入模型</h2>
						</div>
						<!-- 垂直布局面板，包含API端点、密钥、模型选择和连接测试按钮 -->
						<div class="vertical-layout-panel">
							<!-- API端点标签 -->
							<label for="embeddingEndpointUrl"> API-Url (嵌入模型)</label>
							<!-- 输入API端点的文本框 -->
							<input type="text" id="embeddingEndpointUrl" placeholder="请输入: API-Url (嵌入模型)">
							<!-- API密钥标签 -->
							<label for="embeddingEndpointKey"> API-Key (嵌入模型)</label>
							<!-- 输入API密钥的密码框 -->
							<input type="password" id="embeddingEndpointKey" placeholder="请输入: API-Key (嵌入模型)">
							<!-- 嵌入模型选择标签 -->
							<label for="embeddingModelDropdown"> API-Models (嵌入模型)</label>
							<!-- 选择嵌入模型的下拉框 -->
							<select id="embeddingModelDropdown" class="down_selection_box"></select>
							<!-- 垂直布局面板，包含连接测试按钮 -->
							<div class="vertical-layout-panel">
								<!-- 连接测试按钮，点击可测试与嵌入模型的连接状态 -->
								<button class="rectangle-button orange" id="embeddingConnectionButton">
									<i class="fas fa-plug"></i>
									<!-- 显示当前连接状态的文本 -->
									<span id="embeddingConnectionStatusText"> 未连接 (嵌入模型)</span>
									<!-- 连接状态指示器 -->
									<span class="status-indicator status-disconnected"
										id="embeddingStatusIndicator"></span>
								</button>
							</div>
						</div>
					</div>
					<!-- 配置卡片 : 视觉模型 -->
					<div class="config-card">
						<!-- 配置卡片头部，显示视觉模型标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-microchip"></i> 视觉模型</h2>
						</div>
						<!-- 垂直布局面板，包含API端点、密钥、模型选择和连接测试按钮 -->
						<div class="vertical-layout-panel">
							<!-- API端点标签 -->
							<label for="visualEndpointUrl"> API-Url (视觉模型)</label>
							<!-- 输入API端点的文本框 -->
							<input type="text" id="visualEndpointUrl" placeholder="请输入: API-Url (视觉模型)">
							<!-- API密钥标签 -->
							<label for="visualEndpointKey"> API-Key (视觉模型)</label>
							<!-- 输入API密钥的密码框 -->
							<input type="password" id="visualEndpointKey" placeholder="请输入: API-Key (视觉模型)">
							<!-- 视觉模型选择标签 -->
							<label for="visualModelDropdown"> API-Models (视觉模型)</label>
							<!-- 选择视觉模型的下拉框 -->
							<select id="visualModelDropdown" class="down_selection_box"></select>
							<!-- 垂直布局面板，包含连接测试按钮 -->
							<div class="vertical-layout-panel">
								<!-- 连接测试按钮，点击可测试与视觉模型的连接状态 -->
								<button class="rectangle-button orange" id="visualConnectionButton">
									<i class="fas fa-plug"></i>
									<!-- 显示当前连接状态的文本 -->
									<span id="visualConnectionStatusText"> 未连接 (视觉模型)</span>
									<!-- 连接状态指示器 -->
									<span class="status-indicator status-disconnected"
										id="visualStatusIndicator"></span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 语音配置面板，默认隐藏 -->
			<div class="chat-container-panel configure_panel" id="speechConfigContainerPanel" style="display: none;">
				<!-- 面板内容 -->
				<div class="config-grid">
					<!-- 配置卡片 : 语音识别配置 -->
					<div class="config-card">
						<!-- 配置卡片头部，显示语音识别标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-microphone-alt"></i> 语音识别配置</h2>
						</div>
						<!-- 垂直布局面板，包含TTS模式选择 -->
						<div class="vertical-layout-panel">
							<!-- TTS模式标签 -->
							<div>TTS 模式：</div>
							<!-- 水平布局面板，包含不同TTS模式按钮 -->
							<div class="horizontal-layout-panel">
								<!-- 自定义API模式按钮，默认激活 -->
								<button class="rectangle-button speech_mode_button active" id="customSpeechEngineButton"
									disabled>
									<i class="fas fa-plug"></i> 自定义API
								</button>
								<!-- 系统TTS模式按钮 -->
								<button class="rectangle-button speech_mode_button" id="systemSpeechEngineButton">
									<i class="fas fa-volume-up"></i> 系统TTS
								</button>
							</div>
						</div>
						<!-- 自定义API语音引擎配置面板 -->
						<div class="vertical-layout-panel" id="customSpeechEnginePanel">
							<!-- TTS API端点标签 -->
							<label for="apiEndpointSpeechModel">TTS API 端点</label>
							<!-- 输入TTS API端点的文本框，带有默认值和占位提示 -->
							<input type="text" id="apiEndpointSpeechModel" value="http://127.0.0.1:7860/tts"
								placeholder="输入TTS API端点">
						</div>
						<!-- 系统TTS语音引擎配置面板 -->
						<div class="vertical-layout-panel" id="systemSpeechEnginePanel">
							<!-- 系统TTS功能支持指示器 -->
							<div id="ttsSupportIndicator" class="tts-support-indicator tts-supported">
								<i class="fas fa-check-circle"></i>
								<!-- 显示浏览器对系统TTS功能的支持状态 -->
								<span>系统TTS功能可用</span>
							</div>
							<!-- 选择语音的下拉框 -->
							<select id="speechVoiceDropdown" class="tts-voice-select">
							</select>
						</div>
						<!-- 垂直布局面板，包含语音识别相关配置 -->
						<div class="vertical-layout-panel">
							<!-- 识别语言标签 -->
							<label for="speechRecognitionLanguage" style="display: none;"> 识别语言</label>
							<!-- 选择识别语言的下拉框 -->
							<select id="speechRecognitionLanguage" class="down_selection_box" style="display: none;">
								<option value="zh-CN">中文</option>
								<option value="en-US">英语</option>
							</select>
							<div class="horizontal-layout-panel">
								<!-- 禁用 语音识别 按钮 -->
								<button class="rectangle-button speech" id="voiceRecognitionButton">
									<i class="fas fa-microphone"></i> 禁用语音发送
								</button>
								<!-- 禁用 自动朗读 按钮 -->
								<button class="rectangle-button speech" id="autoPlaySpeechButton">
									<i class="fas fa-volume-up"></i> 禁用自动朗读
								</button>
							</div>
						</div>
					</div>
					<!-- 配置卡片 : 语音播放控制 -->
					<div class="config-card">
						<!-- 语音模型配置卡片头部，显示语音模型标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-microphone"></i> 语音播放控制</h2>
						</div>
						<div class="vertical-layout-panel">
							<!-- 播放速度标签 -->
							<label for="speechSpeedSlider"> 播放速度</label>
							<!-- 输入播放速度数值的输入框，范围0.5-2，步长0.1，默认值1.0 -->
							<input type="number" id="speechSpeedValue" min="0.5" max="2" step="0.1" value="1.0">
							<!-- 垂直布局面板，包含播放速度滑动条 -->
							<div class="vertical-layout-panel">
								<!-- 播放速度滑动条，范围0.5-2，步长0.1，默认值1.0 -->
								<input type="range" id="speechSpeedSlider" min="0.5" max="2" step="0.1" value="1.0">
							</div>
							<!-- 音量标签 -->
							<label for="speechVolumeSlider"> 音量大小</label>
							<!-- 输入音量数值的输入框，范围0-1，步长0.1，默认值1.0 -->
							<input type="number" id="speechVolumeValue" min="0" max="1" step="0.1" value="1.0">
							<!-- 垂直布局面板，包含音量滑动条 -->
							<div class="vertical-layout-panel">
								<!-- 音量滑动条，范围0-1，步长0.1，默认值1.0 -->
								<input type="range" id="speechVolumeSlider" min="0" max="1" step="0.1" value="1.0">
							</div>
						</div>
						<!-- 输入要转换为语音的文本的文本域，带有默认内容和占位提示 -->
						<textarea class="speech-prompt" id="speechModelText"
							placeholder="输入要转换为语音的文本...">今天下午3:45在群峦王座q12t3号的咖啡厅见！记得带hello world的宣传单, 我们讨论下关于2024年7月8日的活动安排～</textarea>
						<div class="vertical-layout-panel">
							<!-- 水平布局面板，包含播放和停止按钮 -->
							<div class="horizontal-layout-panel">
								<!-- 播放语音按钮 -->
								<button class="rectangle-button speech" id="playSpeechModelButton">
									<i class="fas fa-play"></i> 播放
								</button>
								<!-- 停止语音播放按钮 -->
								<button class="rectangle-button speech" id="stopSpeechModelButton">
									<i class="fas fa-stop"></i> 停止
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 轻量渲染面板，默认隐藏，用于执行纯粹的图表渲染操作 -->
			<div class="chat-container-panel configure_panel" id="simpleRenderingContainerPanel" style="display: none;">
				<!-- 用于展示轻量渲染结果的区域 -->
				<div class="chat-history-panel render" id="simpleRenderingPanel"></div>
				<!-- 包含渲染输入文本框和发送按钮的容器 -->
				<div class="chat-input-panel">
					<!-- 渲染输入文本框，用户可在此输入消息拷贝或代码块 -->
					<textarea id="renderInputBox" placeholder="请输入需要渲染的 [ 消息拷贝 ] "
						class="auto-resize-textarea"></textarea>
					<!-- 渲染发送按钮，点击后可发送输入框中的内容进行渲染 -->
					<button class="chat-input-button" id="renderInputButton" title="发送消息">
						<i class="fas fa-paper-plane"></i>
					</button>
				</div>
			</div>
			<!-- 轻量视觉面板，默认隐藏，用于执行截图与标记操作 -->
			<div class="chat-container-panel configure_panel" id="simpleVisualContainerPanel" style="display: none;">
				<!-- 面板内容 -->
				<div class="chat-history-panel render">
					<!-- 文件消息区域，用于放置画布和视频元素 -->
					<div class="message file-message">
						<!-- 画布包装器，包含三个不同功能的画布 -->
						<div class="canvas-wrapper" id="canvasWrapper">
							<!-- 基础画布 -->
							<canvas id="canvas"></canvas>
							<!-- 用于绘制操作的画布 -->
							<canvas id="drawCanvas"></canvas>
							<!-- 用于预览的画布 -->
							<canvas id="previewCanvas"></canvas>
						</div>
						<!-- 视频容器，用于显示视频内容 -->
						<div class="video-container" id="videoContainer" style="display: block;">
							<!-- 视频元素，自动播放 -->
							<video id="video" autoplay></video>
						</div>
					</div>
					<!-- 水平布局面板，包含截图相关操作按钮 -->
					<div class="horizontal-layout-panel">
						<!-- 开始截图按钮，点击启动截图功能 -->
						<button id="startBtn" class="rectangle-button screenshot">开始截图</button>
						<!-- 捕获屏幕按钮，初始禁用，用于捕获当前屏幕内容 -->
						<button id="captureBtn" class="rectangle-button screenshot" disabled>捕获屏幕</button>
						<!-- 下载图片按钮，初始禁用，用于下载捕获的图片 -->
						<button id="downloadBtn" class="rectangle-button screenshot" disabled>下载图片</button>
					</div>
					<!-- 截图工具卡片，默认隐藏，包含各种绘图工具和设置 -->
					<div class="vertical-layout-panel" id="screenshotToolCard" style="display: none;">
						<!-- 水平布局面板，包含各种绘图工具按钮 -->
						<div class="horizontal-layout-panel">
							<!-- 矩形工具按钮，点击可使用矩形绘制功能 -->
							<button id="rectTool" class="power-button" title="矩形工具">
								<i class="fas fa-vector-square"></i>
							</button>
							<!-- 绘制工具按钮，点击可使用自由绘制功能 -->
							<button id="drawTool" class="power-button" title="绘制工具">
								<i class="fas fa-pencil-alt"></i>
							</button>
							<!-- 直线工具按钮，点击可使用直线绘制功能 -->
							<button id="lineTool" class="power-button" title="直线工具">
								<i class="fas fa-grip-lines-vertical"></i>
							</button>
							<!-- 圆形工具按钮，点击可使用圆形绘制功能 -->
							<button id="circleTool" class="power-button" title="圆形工具">
								<i class="far fa-circle"></i>
							</button>
							<!-- 文本工具按钮，点击可使用文本添加功能 -->
							<button id="textTool" class="power-button" title="文本工具">
								<i class="fas fa-font"></i>
							</button>
							<!-- 箭头工具按钮，点击可使用箭头绘制功能 -->
							<button id="arrowTool" class="power-button" title="箭头工具">
								<i class="fas fa-long-arrow-alt-right"></i>
							</button>
							<!-- 撤销操作按钮，初始禁用，点击可撤销上一步操作 -->
							<button id="undoBtn" class="power-button" title="撤销操作" disabled>
								<i class="fas fa-undo"></i>
							</button>
						</div>
						<!-- 水平布局面板，包含线条颜色选择器 -->
						<div class="horizontal-layout-panel">
							<!-- 红色线条颜色选择按钮 -->
							<div class="line-color power-button" style="background-color: #e74c3c;"
								data-color="#e74c3c"></div>
							<!-- 蓝色线条颜色选择按钮 -->
							<div class="line-color power-button" style="background-color: #3498db;"
								data-color="#3498db"></div>
							<!-- 绿色线条颜色选择按钮 -->
							<div class="line-color power-button" style="background-color: #2ecc71;"
								data-color="#2ecc71"></div>
							<!-- 黄色线条颜色选择按钮 -->
							<div class="line-color power-button" style="background-color: #f1c40f;"
								data-color="#f1c40f"></div>
							<!-- 紫色线条颜色选择按钮 -->
							<div class="line-color power-button" style="background-color: #9b59b6;"
								data-color="#9b59b6"></div>
							<!-- 黑色线条颜色选择按钮 -->
							<div class="line-color power-button" style="background-color: #000000;"
								data-color="#000000"></div>
						</div>
						<!-- 水平布局面板，包含线条粗细选择器 -->
						<div class="horizontal-layout-panel">
							<!-- 细线条选择按钮，线条粗细为4 -->
							<div class="line-size power-button" data-size="4">S</div>
							<!-- 中等线条选择按钮，线条粗细为8 -->
							<div class="line-size power-button" data-size="8">M</div>
							<!-- 粗线条选择按钮，线条粗细为16 -->
							<div class="line-size power-button" data-size="16">L</div>
							<!-- 更粗线条选择按钮，线条粗细为24 -->
							<div class="line-size power-button" data-size="24">XL</div>
							<!-- 最粗线条选择按钮，线条粗细为32 -->
							<div class="line-size power-button" data-size="32">XXL</div>
						</div>
					</div>
				</div>
				<!-- 包含轻量视觉输入文本框和发送按钮的容器 -->
				<div class="chat-input-panel">
					<!-- 轻量视觉输入文本框，用户可在此输入消息拷贝或代码块 -->
					<textarea id="screenshotInputBox" placeholder="关于这幅画面, 您想和月华讨论什么呢?"
						class="auto-resize-textarea"></textarea>
					<!-- 轻量视觉发送按钮，点击后可发送输入框中的内容进行渲染 -->
					<button class="chat-input-button" id="screenshotInputButton" title="发送消息">
						<i class="fas fa-paper-plane"></i>
					</button>
				</div>
			</div>
			<!-- 轻量知识面板，默认隐藏，用于执行知识库内容的显示与控制 -->
			<div class="chat-container-panel configure_panel" id="simpleKnowledgeContainerPanel" style="display: none;">
				<div class="chat-history-panel render" id="simpleKnowledgePanel"></div>

				<div class="chat-input-panel">
					<button id="knowledgeRefreshButton" class="chat-input-button" title="刷新知识库">
						<i class="fas fa-sync"></i>
					</button>
					<textarea id="knowledgeInputBox" placeholder="您希望月华了解什么呢?" class="auto-resize-textarea"></textarea>
					<button id="knowledgeInputButton" class="chat-input-button" title="发送消息">
						<i class="fas fa-paper-plane"></i>
					</button>
				</div>
			</div>
			<!-- 功能控制面板，默认隐藏，用于提供系统设置和功能页面的快捷入口 -->
			<div class="chat-container-panel configure_panel" id="functionControlContainerPanel" style="display: none;">
				<!-- 配置网格布局容器，用于组织配置卡片 -->
				<div class="config-grid">
					<!-- 配置卡片 : 聊天参数管理 -->
					<div class="config-card">
						<!-- 数据管理配置卡片头部，显示标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-server"></i> 聊天管理</h2>
						</div>
						<!-- 垂直布局面板，包含模型参数配置 -->
						<div class="vertical-layout-panel">
							<!-- 上下文长度参数标签 -->
							<label for="messageSliceLength">用户消息截断长度</label>
							<!-- 上下文长度参数输入框，可输入数值，默认值4096 -->
							<input type="number" id="messageSliceLength" value="4096">
							<!-- 垂直布局面板，包含上下文长度参数滑动条 -->
							<div class="vertical-layout-panel">
								<!-- 上下文长度参数滑动条，范围512-16384，步长512，默认值4096 -->
								<input type="range" id="messageSliceLengthSlider" min="512" max="16384" step="512"
									value="4096">
							</div>
						</div>
						<!-- 水平布局面板，包含导出聊天和导入聊天按钮 -->
						<div class="horizontal-layout-panel">
							<!-- 导出聊天按钮，点击可导出聊天记录 -->
							<button class="rectangle-button orange" id="exportChatInteractionButton">
								<i class="fas fa-file-export"></i> 导出聊天
							</button>
							<!-- 导入聊天按钮，点击可导入聊天记录 -->
							<button class="rectangle-button green" id="importChatInteractionButton">
								<i class="fas fa-file-import"></i> 导入聊天
							</button>
						</div>
						<!-- 垂直布局面板，包含Live2D动作控制相关内容 -->
						<div class="vertical-layout-panel margin-top-20px" style="display: none;">
							<!-- Live2D动作控制标题 -->
							<h3><i class="fas fa-user"></i> Live2D 动作控制</h3>
							<!-- 水平布局面板，包含Live2D模型状态选择下拉框和执行动作按钮 -->
							<div class="horizontal-layout-panel gap-10px">
								<!-- Live2D模型状态选择下拉框 -->
								<select id="live2dStateDropdown" class="down_selection_box" title="Live2D模型状态选择">
								</select>
								<!-- 执行动作按钮，点击可触发选中的Live2D模型状态 -->
								<button class="rectangle-button" id="triggerLive2DStateButton">
									<i class="fas fa-play"></i> 执行动作
								</button>
							</div>
						</div>
					</div>
					<!-- 配置卡片 : 系统配置管理 -->
					<div class="config-card">
						<!-- 数据管理配置卡片头部，显示标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-server"></i> 配置管理</h2>
						</div>
						<!-- 已保存配置展示区域 -->
						<div class="saved-configs">
							<!-- 配置列表容器，用于展示已保存的配置 -->
							<div class="config-list" id="configList"></div>
						</div>
						<!-- 水平布局面板，包含保存配置和导入配置按钮 -->
						<div class="horizontal-layout-panel">
							<!-- 保存配置按钮，点击可保存当前配置 -->
							<button class="rectangle-button orange" id="saveConfigButton">
								<i class="fas fa-save"></i> 保存配置
							</button>
							<!-- 导入配置按钮，点击可导入已保存的配置 -->
							<button class="rectangle-button cyan" id="importConfigButton">
								<i class="fas fa-file-import"></i> 导入配置
							</button>
						</div>
						<!-- 清空所有配置按钮，点击可删除所有已保存的配置 -->
						<button class="rectangle-button red" id="deleteAllConfigsButton">
							<i class="fas fa-trash"></i> 清空所有配置
						</button>
					</div>
					<!-- 系统设置配置卡片 -->
					<div class="config-card">
						<!-- 配置卡片头部，显示卡片标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-server"></i> 系统设置</h2>
						</div>
						<!-- 垂直布局面板，用于排列系统设置相关按钮 -->
						<div class="vertical-layout-panel">
							<!-- 系统提示词配置按钮，点击可打开系统提示词面板 -->
							<button class="rectangle-button green" id="openSystemPromptPanelButton">
								<i class="fas fa-user-circle"></i> 月华人设
							</button>
							<!-- 模型配置按钮，点击可打开模型配置面板 -->
							<button class="rectangle-button orange" id="modelConfigureButton">
								<i class="fas fa-microchip"></i> 模型配置
							</button>
							<!-- 语音配置按钮，点击可打开语音配置面板 -->
							<button class="rectangle-button speech" id="voiceConfigureButton">
								<i class="fas fa-microphone"></i> 语音配置
							</button>
						</div>
					</div>
					<!-- 功能页面配置卡片 -->
					<div class="config-card">
						<!-- 配置卡片头部，显示卡片标题 -->
						<div class="panel-header">
							<h2><i class="fas fa-server"></i> 功能页面</h2>
						</div>
						<!-- 垂直布局面板，用于排列功能页面相关按钮 -->
						<div class="vertical-layout-panel">
							<!-- 轻量渲染按钮，点击可打开轻量渲染功能页面 -->
							<button class="rectangle-button pink" id="simpleRenderingButton">
								<i class="fas fa-palette"></i> 轻量渲染
							</button>
							<!-- 轻量视觉按钮，点击可打开轻量视觉功能页面 -->
							<button class="rectangle-button pink" id="simpleVisualButton">
								<i class="fas fa-camera"></i> 轻量视觉
							</button>
							<!-- 轻量知识按钮，点击可打开轻量知识功能页面 -->
							<button class="rectangle-button pink" id="simpleKnowledgeButton">
								<i class="fas fa-graduation-cap"></i> 轻量知识
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<!-- 配置导入对话框 -->
	<div class="system-message config" id="importConfig">
		<!-- 配置导入对话框头部 -->
		<div class="config-header-panel" id="importConfig-header">
			<!-- 配置导入对话框标题 -->
			<h3 class="config-panel-title">
				<i class="fas fa-file-import"></i> 导入配置
			</h3>
		</div>
		<!-- 配置导入对话框主体区域 -->
		<div class="config-body-panel">
			<!-- 用于粘贴配置JSON的文本框 -->
			<textarea id="importConfigJson" placeholder="在此粘贴配置JSON..." class="import_config_json">
				</textarea>
		</div>
		<!-- 配置导入对话框按钮区域 -->
		<div class="horizontal-layout-panel margin-top-bottom-5px ">
			<!-- 确认导入操作的按钮 -->
			<button class="rectangle-button cyan" id="confirmImportButton" style="max-height: 55px;">导入</button>
			<!-- 取消导入操作的按钮 -->
			<button class="rectangle-button red" id="cancelImportButton" style="max-height: 55px;">取消</button>
		</div>
	</div>
	<!-- 配置保存对话框 -->
	<div class="system-message config" id="saveConfig">
		<!-- 配置保存对话框头部 -->
		<div class="config-header-panel" id="saveConfig-header">
			<!-- 配置保存对话框标题 -->
			<h3 class="config-panel-title">
				<i class="fas fa-save"></i> 保存配置
			</h3>
		</div>
		<!-- 配置保存对话框主体区域 -->
		<div class="config-body-panel">
			<!-- 用于输入配置名称的输入框 -->
			<input type="text" id="configName" placeholder="输入配置名称" required>
			<!-- 用于显示配置JSON的文本框 -->
			<textarea id="configJson" placeholder="配置JSON" class="config_json" readonly></textarea>
		</div>
		<!-- 配置保存对话框按钮区域 -->
		<div class="horizontal-layout-panel margin-top-25px-bottom-5px">
			<!-- 确认保存操作的按钮 -->
			<button class="rectangle-button cyan" id="confirmSaveButton" style="max-height: 55px;">保存</button>
			<!-- 取消保存操作的按钮 -->
			<button class="rectangle-button red" id="cancelSaveButton" style="max-height: 55px;">取消</button>
		</div>
	</div>
	<!-- 系统提示词面板 -->
	<div class="system-message config" id="systemPromptPanel">
		<!-- 配置保存对话框头部 -->
		<div class="config-header-panel" id="systemPromptPanel-header">
			<!-- 配置保存对话框标题 -->
			<h3 class="config-panel-title">
				<i class="fas fa-info-circle"></i> 系统提示词
			</h3>
		</div>
		<div class="vertical-layout-panel">
			<!-- 系统提示词配置面板 -->
			<div class="system-prompt-panel">
				<!-- 输入系统提示词的文本域，包含占位提示信息 -->
				<textarea class="system-prompt" id="systemPrompt" placeholder="输入系统提示词（角色设定、行为指令等）"></textarea>
			</div>
			<div class="horizontal-layout-panel margin-bottom-5px">
				<!-- 确认保存操作的按钮 -->
				<button class="rectangle-button red" id="clearSystemPromptButton" style="max-height: 55px;"> 清除</button>
				<!-- 取消保存操作的按钮 -->
				<button class="rectangle-button" id="closePromptPanelButton" style="max-height: 55px;"> 取消</button>
			</div>
		</div>
	</div>
	<!-- API状态显示区域 -->
	<div class="system-message" id="systemStatusPanel"></div>
	<!-- 二维码显示区域 -->
	<div class="system-message qrcode" id="qrcodeStatusPanel">
		<div class="vertical-layout-panel vertical-column-center-panel">
			<div id="qrcodeStatusPanel-header"> 局域网设备访问地址 </div>
			<div id="qrcodePanel"></div>
		</div>
	</div>
	<!-- TODO : 项目脚本 : 元素映射区 -->
	<script src="js/mapping/button.js"></script>
	<script src="js/mapping/dropdown.js"></script>
	<script src="js/mapping/import.js"></script>
	<script src="js/mapping/panel.js"></script>
	<script src="js/mapping/slider.js"></script>
	<script src="js/mapping/status.js"></script>
	<script src="js/mapping/window.js"></script>
	<!-- TODO : 项目脚本 : 系统Ⅰ区 -->
	<script src="js/system/emotional.js"></script>
	<script src="js/system/connector.js"></script>
	<script src="js/system/variable.js"></script>
	<script src="js/system/contact.js"></script>
	<script src="js/system/tools.js"></script>
	<script src="js/system/maths.js"></script>
	<!-- TODO : 项目脚本 : 页面渲染区 -->
	<script src="js/render/message.js"></script>
	<script src="js/render/chart.js"></script>
	<!-- TODO : 项目脚本 : 聊天生成区 -->
	<script src="js/chat/messages.js"></script>
	<script src="js/chat/binding.js"></script>
	<script src="js/chat/stream.js"></script>
	<script src="js/chat/prompt.js"></script>
	<script src="js/chat/delay.js"></script>
	<script src="js/chat/tools.js"></script>
	<!-- TODO : 项目脚本 : 按钮交互区 -->
	<script src="js/button/package.js"></script>
	<script src="js/button/routine.js"></script>
	<script src="js/button/toolbar.js"></script>
	<script src="js/button/patting.js"></script>
	<!-- TODO : 项目脚本 : 文件处理区 -->
	<script src="js/file/knowledge/global-variables.js"></script>
	<script src="js/file/knowledge/vector-embeddings.js"></script>
	<script src="js/file/knowledge/hash-utils.js"></script>
	<script src="js/file/knowledge/text-splitting.js"></script>
	<script src="js/file/knowledge/vector-storage.js"></script>
	<script src="js/file/knowledge/history-sync.js"></script>
	<script src="js/file/knowledge/file-operations.js"></script>
	<script src="js/file/knowledge/page-processing.js"></script>
	<script src="js/file/knowledge/knowledge-management.js"></script>
	<script src="js/file/knowledge/event-mapping.js"></script>
	<script src="js/file/chat/records.js"></script>
	<script src="js/file/chat/binding.js"></script>
	<script src="js/file/chat/handle.js"></script>
	<script src="js/file/chat/treatment.js"></script>
	<script src="js/file/chat/image.js"></script>
	<script src="js/file/chat/drag.js"></script>
	<script src="js/file/config.js"></script>
	<script src="js/file/tool.js"></script>
	<!-- TODO : 项目脚本 : 扩展区 -->
	<script src="js/speechRecognition.js"></script>
	<script src="js/simpleRendering.js"></script>
	<script src="js/playSpeech.js"></script>
	<script src="js/live2d.js"></script>
	<!-- TODO : 项目脚本 : 截图互动区 -->
	<script src="js/screenshot/mapping.js"></script>
	<script src="js/screenshot/history-manager.js"></script>
	<script src="js/screenshot/screenshot-core.js"></script>
	<script src="js/screenshot/tool-selector.js"></script>
	<script src="js/screenshot/drawing-tools.js"></script>
	<script src="js/screenshot/screenshot.js"></script>
	<script src="js/screenshot/interaction.js"></script>
	<!-- TODO : 项目脚本 : 初始化区 -->
	<script src="js/initialize/language.js"></script>
	<script src="js/initialize/dynamic.js"></script>
	<script src="js/initialize/config.js"></script>
	<script src="js/initialize/input.js"></script>
	<script src="js/initialize/load.js"></script>
	<!-- TODO : 项目脚本 : 系统Ⅱ区 -->
	<script src="js/system/prohibit.js"></script>
	<script src="js/system/binding.js"></script>
</body>

</html>